
<template>
  <div>
   <h4>当前是批量操作-- 设备保修 Reqair</h4>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
      
        <el-input
          v-model="formInline.number"
          placeholder="请输入设备编号..."
        ></el-input>
      </el-form-item>
        <el-form-item label="项目：" label-width="100px">
          <el-select v-model="formInline.projectid" clearable filterable placeholder="请选择项目" >
          <el-option
            v-for="item in selectData"
            :key="item.projectid"
            :label="item.projectName"
            :value="item.projectid" />
        </el-select>
        </el-form-item>

      <el-form-item>
        <el-button @click="getReqairList">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialogVisible = true">新增</el-button>
      </el-form-item>
   
    </el-form>
   <!--  设备报修信息列表 -->
    <el-table :data="tableData" border style="width: 100%">
       <el-table-column prop="number" label="编号">
        <template slot-scope="scope">
          <el-button @click="handleClicknumber(scope.row)" type="text" size="big">{{scope.row.number}}</el-button>
     
        </template>
      </el-table-column>

      <el-table-column prop="projectName" label="项目名称"> </el-table-column>
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <el-table-column prop="phone" label="联系方式">
      </el-table-column>
      <el-table-column prop="reqairTypes" label="报修类型" style="color:red"> 
         <template slot-scope="scope">
          <el-button  type="text" size="big">{{scope.row.reqairTypes}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="reqairTime" label="提交日期"> </el-table-column>
       <el-table-column prop="reqairDescribe" label="描述"> </el-table-column>
        <el-table-column prop="reqairStatus" label="状态">
          <template slot-scope="scope">
					<el-tag size="small" v-if="scope.row.reqairStatus === 1" type="success">已维修</el-tag>
					<el-tag size="small" v-else-if="scope.row.reqairStatus === 0" type="danger">待维修</el-tag>
				</template> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
        
					<el-button type="text" slot="reference"  @click="handleClickReqair(scope.row)">维修</el-button>

          
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.row.reqairId)">
							<el-button type="text" slot="reference">删除</el-button>
						</el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[1, 10, 15, 20, 30]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!--新增对话框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
    <!-- -->
      <el-form :model="editForm"   :rules="editFormRules" ref="editForm">
        <el-form-item label="设备编号：" prop="number" label-width="100px">
          <el-input
            v-model="editForm.number"
            autocomplete="off"
          ></el-input>
         
        </el-form-item>
         <el-form-item label="报修类型：" prop="reqairType" label-width="100px">
        
          <el-select v-model="editForm.reqairType" clearable filterable placeholder="报修类型">
            <el-option label="进水异常" value="0"></el-option>
            <el-option label="出水异常" value="1"></el-option>
            <el-option label="支付成功不工作" value="2"></el-option>
            <el-option label="支付异常" value="3"></el-option>
            <el-option label="线路损坏" value="4"></el-option>
            <el-option label="其它" value="5"></el-option>
          </el-select>
     
         
        </el-form-item>

        <el-form-item label="联系电话：" prop="phone" label-width="100px">
          <el-input v-model="editForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述：" prop="reqairDescribe" label-width="100px">
          <el-input v-model="editForm.reqairDescribe" autocomplete="off"></el-input>
        </el-form-item>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('editForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('editForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
     <!--新增 派遣维修 对话框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogReqair"
      width="600px"
      :before-close="handleClose"
    >
    <!-- -->
      <el-form :model="ReqairForm"   :rules="ReqairFormRules" ref="ReqairForm">
        
     
       
       
         <el-form-item label="状态"  prop="reqairStatus" label-width="100px">
					<el-radio-group v-model="ReqairForm.reqairStatus">
						<el-radio :label="0">待维修</el-radio>
						<el-radio :label="1">已维修</el-radio>
					</el-radio-group>
				</el-form-item>
         <el-form-item label="描述：" prop="reqairDescribe" label-width="100px">
          <el-input v-model="ReqairForm.reqairDescribe" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ReqairForm')">取 消</el-button>
        <el-button type="primary" @click="submitReqairForm('ReqairForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Reqair",

  data() {
    return {
      ///  新增项目信息的模块隐藏  String number, String projectid
      dialogVisible: false,
      dialogReqair: false,
      currentPage4: 4,
      number: "",
      projectid: "",
      total: 0,
      size: 10,
      current: 1,
      tableData: [],
      selectData: [],
      formInline: {},
      editForm:{},
      ReqairForm:{},
      userInfo:{},
       ReqairFormRules: {
        reqairStatus: [
          { required: true, message: "请选择维修情况", trigger: "blur" },
        ],
        reqairDescribe: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
      
        
      },
      editFormRules: {
        number: [
          { required: true, message: "请输入编号", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        reqairType: [
          { required: true, message: "请输入报修类型", trigger: "blur" },
        ],
        
      },
    };
  },
  //  页面加载前调用的方法
  created() {
    //this.getReqairList();
    this.selectDataMethod();
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
				this.$axios.get("/sys/userInfo").then(res => {
				  console.log(res.data.data)
					this.userInfo = res.data.data
				})
			},
      /// 点击维修派遣
    handleClickReqair(row) {
      console.log(row);
      this.dialogReqair = true
        this.ReqairForm = {
          reqairId: row.reqairId,
          reqairDescribe: row.reqairDescribe,
          reqairStatus: row.reqairStatus,
       
        };
    },
     // 关闭用户信息框
    handleClose() {
      this.resetForm("editForm");
      this.resetForm("ReqairForm");
    },
     // 用户信息编辑的一个取消
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
      this.dialogReqair = false;
      this.editForm = {};
      this.ReqairForm = {};
    },
    handleSizeChange(val) {
      console.log(`每页条` + val);
      this.size = val;
      this.getReqairList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ` + val);
      this.current = val;
      this.getReqairList();
    },
    // 查询全部的项目信息
    selectDataMethod() {
         this.$axios.get("/sys/userInfo").then(resOne => {
					
					this.userInfo = resOne.data.data
          console.log("--------------------")
          console.log(resOne.data.data);
          if(resOne.data.data.Projecttrue){
              this.$axios
              .get("/tProjectBase/list", {
                params: {
                  current: 0,
                  size: 0,
                },
              })
              .then((res) => {
                console.log(res.data.data);
                this.selectData = res.data.data;
              });
          }
          else{
             this.selectData = [{
               "projectid":resOne.data.data.projectid,
               "projectName":resOne.data.data.projectname
             }];
             this.formInline.projectid=resOne.data.data.projectid;
           // this.getFacilityList();
          }
           this.getReqairList();
				})
     
     
    },
    //
    //  查询报修信息
    getReqairList() {
    console.log(this)
      this.$axios
        .get("/tFacilityReqair/list", {
          params: {
            projectid: this.formInline.projectid,
            number: this.formInline.number,
            page: this.current,
            limit: this.size,
          },
        })
        .then((res) => {
              console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.size;
          //this.current = res.data.count;
        });
    },
    /// 删除设备报修信息
    handleDelete(id){
        this.$axios.get("/tFacilityReqair/delete/"+id).then(res => {
                  this.$message({
                    showClose: true,
                    message: '恭喜你，删除操作成功',
                    type: 'success',
                    onClose:() => {
                     this.getReqairList();
                    }
                  });
                })
    },
    ///w维修派遣
     submitReqairForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        
          this.$axios
            .get("/tFacilityReqair/updateReqair",
            {params:{
              reqairId: this.ReqairForm.reqairId,
              reqairDescribe: this.ReqairForm.reqairDescribe,
              reqairStatus: this.ReqairForm.reqairStatus,
              }})
            .then((res) => {
              if (res) {
                this.$message({
                  showClose: true,
                  message: "恭喜你，信息操作成功",
                  type: "success",
                  onClose: () => {
                    this.dialogReqair = false;
                    this.getReqairList();
                  },
                });

                //alert('success')
              } else {
                alert("err");
              }
            });
        } else {
          console.log("error submit!!");
           this.$message({
                  showClose: true,
                  message: "表单验证失败！！！",
                  type:"warning",
                 
                });
          return false;
        }
      });
    },
     /// 报修信息框的用户信息提交按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          
          this.$axios
            .get("/tFacilityReqair/add",
            {params:{
              number:this.editForm.number,
              phone:this.editForm.phone,
              reqairType:this.editForm.reqairType,
              reqairDescribe:this.editForm.reqairDescribe,
              ID:this.userInfo.id
              }})
            .then((res) => {
              if (res) {
                this.$message({
                  showClose: true,
                  message: "恭喜你，信息操作成功",
                  type: "success",
                  onClose: () => {
                    this.dialogVisible = false;
                    this.getReqairList();
                  },
                });

                //alert('success')
              } else {
                alert("err");
              }
            });
        } else {
          console.log("error submit!!");
           this.$message({
                  showClose: true,
                  message: "表单验证失败！！！",
                  type:"warning",
                 
                });
          return false;
        }
      });
    },
     ///  点击设备编号，到一个具体的设备信息页面
    handleClicknumber(row) {
      this.$router.push({ path: "/facility/FacilityBase/" + row.number });
      console.log(row);
    },
  },
};
</script>

<style scoped>
.el-pagination {
  float: right;
  margin-top: 22px;
}
</style>